<!DOCTYPE html>
<html class="no-js">    
    <head>
        <title>网络数据加速传输系统</title>
        <!-- Bootstrap -->
        <link href="View/FAST/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="View/FAST/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
        <link href="View/FAST/vendors/easypiechart/jquery.easy-pie-chart.css" rel="stylesheet" media="screen">
        <link href="View/FAST/assets/styles.css" rel="stylesheet" media="screen">
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="View/FAST/vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
    </head>
    
    <body>
    {include h}
        <div class="container-fluid">
            <div class="row-fluid">
                {include l}
                <!--/span-->
                <div class="span10" id="content">

                    <div class="row-fluid">
                        <!-- block -->
                        <div class="block">
                            <div class="navbar navbar-inner block-header">
                                <div class="muted pull-left">系统空间</div>
                                <div class="pull-right"><span class="badge badge-warning"></span>
                                </div>
                            </div>
                            <div class="block-content collapse in">
                                <div class="span3">
                                    <div class="chart" data-percent="1" id="memDev">1%</div>
                                    <div class="chart-bottom-heading"><span class="label label-info">内存</span>
                                    </div>
                                </div>
                                <div class="span3">
                                    <div class="chart" data-percent="1" id="cpuDev">1%</div>
                                    <div class="chart-bottom-heading"><span class="label label-info">CPU</span>
                                    </div>
                                </div>
                                <div class="span3">
                                    <div class="chart" data-percent="1" id="hdDev">1%</div>
                                    <div class="chart-bottom-heading"><span class="label label-info">存储空间</span>
                                    </div>
                                </div>
                                <div class="span3">

                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th>类别</th>
                                            <th>空余</th>
                                            <th>总计</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>内存</td>
                                            <td id="memfTd"></td>
                                            <td id="memtTd"></td>
                                        </tr>
                                        <tr>
                                            <td>磁盘</td>
                                            <td id="hdfTd"></td>
                                            <td id="hdtTd"></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                        <!-- /block -->
                    </div>
                    <div class="row-fluid">
                        <div class="span6">
                            <!-- block -->
                            <div class="block">

                                <div class="navbar navbar-inner block-header">
                                    <div class="muted pull-left">正在运行的任务</div>
                                    <div class="pull-right">
                                         <span id="Mainprocess" class="badge badge-info " title="刷新链路" style="cursor:pointer;" onclick="refreshFileChain();refreshProxy();">
                                            <li class="icon-refresh"></li>
                                        </span>

                                    </div>
                                </div>
                                <div class="block-content collapse in">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>(文件加速)发送端</th>
                                                <th>接收端</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableFileChain">

                                        </tbody>
                                        <thead>
                                        <tr>
                                            <th>(代理)任务id</th>
                                            <th>任务信息</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tableProxy">

                                        </tbody>
                                    </table>
                                    <table class="table table-striped">

                                    </table>
                                </div>

                            </div>
                            <!-- /block -->
                        </div>
                        <div class="span6">
                            <!-- block -->
                            <div class="block">
                                <div class="navbar navbar-inner block-header">
                                    <div class="muted pull-left">加速器工作进程监控</div>
                                    <div class="pull-right">
                                         <span  class="badge badge-success " title="重启控制中心" style="cursor:pointer;" onclick="restartControlCenter();">
                                            <li class="icon-play"></li>
                                        </span>
                                        <span  class="badge badge-info " title="查看中心" style="cursor:pointer;" onclick="resfreshControlCenter();">
                                            <li class="icon-refresh"></li>
                                        </span>
                                    </div>
                                </div>
                                <div class="block-content collapse in">
                                    <table class="table table-striped">
                                        <thead>
                                            <tr>
                                                <th>进程名</th>
                                                <th>协议</th>
                                                <th>端口</th>
                                            </tr>
                                        </thead>
                                        <tbody id="tableFASTcontrol">

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <!-- /block -->
                        </div>
                    </div>

                </div>
            </div>
            <hr>
            {include f}
        </div>
        <!--/.fluid-container-->
        <script src="View/FAST/vendors/jquery-1.9.1.min.js"></script>
        <script src="View/FAST/bootstrap/js/bootstrap.min.js"></script>
        <script src="View/FAST/vendors/easypiechart/jquery.easy-pie-chart.js"></script>
        <script src="View/FAST/assets/scripts.js"></script>
        <script>
            function refreshSysInfo(){
                $.get("?index/getSysInfo?",{},  function(e){
                    if(e.state){
                        $("#memDev").html( (e.info["mem_used"]/e.info["mem_total"]*100).toFixed(0)+"%");
                        $("#memDev").attr("data-percent",(e.info["mem_used"]/e.info["mem_total"]*100).toFixed(0));
                        $("#cpuDev").html( (e.info["cpu_us"]*1).toFixed(2)+"%");
                        $("#cpuDev").attr("data-percent",(e.info["cpu_us"]*1).toFixed(2));
                        $("#hdDev").html(e.info["hd_rate"]);
                        $("#hdDev").attr("data-percent",e.info["hd_rate"]);
                        $("#hdfTd").html(e.info["hd_avail"]+"GB");
                        $("#hdtTd").html(e.info["hd_total"]+"GB");
                        $("#memfTd").html((e.info["mem_buff"]+e.info["mem_free"]).toFixed(2)+"GB");
                        $("#memtTd").html((e.info["mem_total"])+"GB");
                        $('.chart').easyPieChart({animate: 1000});
                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');

            }
            //刷新控制中心
            function resfreshControlCenter(){
                $.get("?index/resfreshControlCenter?",{},  function(e){
                    if(e.state){
                        $("#tableFASTcontrol").empty();
                        e.data.forEach(function(item){
                            $("#tableFASTcontrol").append("<tr><td>"+item['name']+"</td><td>"
                                    +item['item_XY']+"</td><td>"
                                    +item['portL']+"</td></tr>");
                        })
                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');

            }
            function restartControlCenter(){
                $.get("?index/restartControlCenter?",{},  function(e){
                    if(e.state){
                        $.jGrowl(e.info);
                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');
            }
            function refreshFileChain(){
                $.get("?index/getFileChain?",{},  function(e){
                    if(e.state){
                        $("#tableFileChain").empty();
                        e.info.forEach(function(item){
                            $("#tableFileChain").append("<tr><td>"+item['from']+"</td><td>"
                                    +item['to']+"</td></tr>");
                        })
                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');

            }
            function refreshProxy(){
                $.get("?index/getProxy?",{},  function(e){
                    if(e.state){
                        $("#tableProxy").empty();
                        e.info.forEach(function(item){
                            $("#tableProxy").append("<tr><td>"+item['ID']+"</td><td>"
                                +item["name"]+"</td></tr>");
                            console.log(item["name"]);
                        })
                    }else{
                        $.jGrowl(e.info);
                    }

                },'json');

            }
        $(function() {
            // Easy pie charts
            refreshSysInfo();
            refreshFileChain();
            refreshProxy();
            resfreshControlCenter();
           // $('.chart').easyPieChart({animate: 1000});



        });
        </script>
    </body>

</html>